.flex(@j:space-between) {
    display: flex;
    justify-content: @j;
    align-items: center;
  }
  .f2ec-ydc-colum-layout{
    display: flex;
    min-height: calc(100vh - 145px);
    .left,
    .right {
      min-height: 100%;
    }
    .left {
      display: flex;
      position: relative;
      .left-content {
        flex: 1;
        z-index: 9;
      }
    }
    .right {
      z-index: 10;
      flex: 1;
      background-color: var(--f2e-gray-1);
      padding-left: 24px;
      padding-right: 8px;
      overflow: hidden;
    }
    .expend-left {
      z-index: 12;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .expend-left-content {
      .left-content {
        transition: 0.5s ease-in;
      }
      .draggleLine-wrapper {
          &:hover {
            border-width: 2px;
            border-color: var(--f2e-gray-1) !important;
        }
      }
    }
    .left{
        .draggleLine-wrapper {
            width: 4px;
            height: 100%;
            margin-right: -4px;
            background-color: var(--f2e-gray-1); 
            border-right: solid 1px var(--f2e-app-gray-color-3);
            cursor: col-resize;
            z-index: 11;
            &:hover {
                border-width: 2px;
                border-color: var(--ant-primary-color);
            }
        }
    }
    .hide-left-content{
        .draggleLine-wrapper {
            border-left: solid 1px transparent;
            border-right-color: transparent;
            &:hover {
                border-right-color: transparent;
            }
        }
        .expend-left{
            width: 24px;
            height: 64px;
            position: absolute;
            top: calc(50vh - 30px);
            left: -1px;
            background-repeat: no-repeat;
            background-size: 100% 100%;
        }
    }
}